{% extends "base/base_layout.html" %}
{% load static %}
{% block sidebar_option %}
sidebar-collapse
{% endblock %}
{% block content %}
<div class="content-wrapper">
   <div class="content-header">
   </div>
   <div class="container-fluid">
      <div class="row">
         <div class="col-lg-12">
            <div class="card">
               <div class="card-body">
                  <div class="h-100 d-flex align-items-center justify-content-center">
                     <div class="login-box">
                        <div class="login-logo">
                           <a href="">Change Password</a>
                        </div>
                        <div class="card">
                           <div class="card-body login-card-body">
                              <form method="post">
                                 {% csrf_token %}
                                 {% if messages %}
                                <ul class="messages">
                                    {% for message in messages %}
                                    <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
                                    {% endfor %}
                                </ul>
                                {% endif %}
                                 {{ form.non_field_errors }}
                                 <div class="input-group mb-3">
                                    <input type="password" name="old_password" class="form-control" placeholder="Current Password"  autocomplete="current-password" autofocus="" required="" id="id_old_password">
                                    <div class="input-group-append">
                                       <div class="input-group-text">
                                          <span class="fas fa-lock"></span>
                                       </div>
                                    </div>
                                 </div>
                                 {% for err in form.old_password.errors %}
                                 <small> {{ err }} </small><br>
                                 {% endfor %}
                                 <div class="input-group mb-3">
                                    <input type="password" name="new_password1" class="form-control" placeholder="New Password" autocomplete="new-password" required="" id="id_new_password1">
                                    <div class="input-group-append">
                                       <div class="input-group-text">
                                          <span class="fas fa-lock"></span>
                                       </div>
                                    </div>
                                 </div>
                                 {% for err in form.new_password1.errors %}
                                 <small> {{ err }} </small><br>
                                 {% endfor %}
                                 <div class="input-group mb-3">
                                    <input type="password" name="new_password2" class="form-control" placeholder="Confirm Password" autocomplete="new-password" required="" id="id_new_password2">
                                    <div class="input-group-append">
                                       <div class="input-group-text">
                                          <span class="fas fa-lock"></span>
                                       </div>
                                    </div>
                                 </div>
                                 {% for err in form.new_password2.errors %}
                                 <small> {{ err }} </small><br>
                                 {% endfor %}
                                 <div class="row">
                                    <div class="col-6">
                                       <button type="submit" class="btn btn-primary btn-block">Update Password</button>
                                    </div>
                                 </div>
                              </form>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
{% endblock %}